<template>
  <div class="lauch-item">
    <div class="lauch-icon" @click="jump(app)" :style="iconStyle">
      <img v-if="icon" :src="icon" alt />
      <span v-else class="icon-text">
        {{ app.webName[0].toUpperCase() }}
      </span>
    </div>
    <p class="lauch-title">{{ app.webName }}</p>
  </div>
</template>

<script>
import { mapActions } from "vuex"

export default {
  components: {
    // BullectBox
  },
  props: {
    app: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    icon() {
      // if (!this.app.webIco && this.app.webSite) {
      //   return this.app.webSite + '/favicon.ico'
      // } else if(){
      return this.app.webIco
      // }
    },
    iconStyle() {
      return {
        backgroundColor: this.app.webIco ? "transparent" : "#5835bf"
      }
    }
  },
  methods: {
    ...mapActions(["openApp", "moveToDrawer", "delCollect"]),
    jump(app) {
      // location.href = app.webSite
      const reg = /http[s]{0,1}:\/\/([\w.]+\/?)\S*/
      let prefix = ""
      if (!reg.test(app.webSite)) {
        prefix = "http://"
      }

      window.open(prefix + app.webSite, "_blank")
    },
    showMenu() {},
    closeMenu() {}
  },
  mounted() {}
}
</script>

<style lang="less" scoped>
.lauch-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  // border-radius: .625rem;
  .lauch-icon {
    background-color: transparent;
    border-radius: 16%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    // box-shadow: 0 .625rem 1.25rem rgb(0 0 0 / 10%);
    &:hover {
      transform: scale(1.05);
      transition: all 0.3s;
    }
    .icon-text {
      font-size: 4.375rem;
    }
    img {
      width: 100%;
      height: 100%;
    }

    width: 6.25rem;
    height: 6.25rem;
  }
  .lauch-title {
    font-size: 1rem;
    margin-top: 0.625rem;
    text-shadow: 0 0 0.5rem rgb(0 0 0 / 60%);
    max-width: 6.25rem;
    text-align: center;
    // overflow: hidden;
  }
  margin: 3.125rem 2.5rem;
  color: white;
  // background: blue;
}
</style>
